<template>
  <!-- 地产详情 -->
  <div style="margin-bottom: 15px">
    <el-row type="flex" justify="center" style="margin-top: 15px">
      <el-col :span="15">
        <el-tabs type="card">
          <el-tab-pane label="地产详情"></el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="15" class="title">
        <b>景云阁</b>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center" class="center">
      <el-col :span="10" class="big">
        <img src="@/assets/common/fang6.jpg" />
        <!-- <img :src="" /> -->
      </el-col>
      <el-col :span="5" class="small">
        <span v-if="list.photos ? list.photos.length === 0 : ''"
          ><b style="font-size: 25px">暂无图片</b></span
        >
        <img
          v-else
          v-for="item in list"
          :src="item.photos"
          :key="item.id"
        />
        <el-row class="price"
          >价格：12312</el-row
        >
        <el-row>
          <!-- <MapContainer :myMap="map" v-if="map"></MapContainer> -->
            地址：<img src="@/assets/common/ditu.png"  class="address">
          
        </el-row>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="15" class="foot">
        集团实行董事会领导下的总裁负责制，秉承“团结、奋进、求实、开拓”的企业精神，奉行“与时俱进，长安久盛”的企业宗旨
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {  getProperties } from "@/api/agents";
import MapContainer from "@/components/MapContainer.vue";
import { map } from "@/api/map";
export default {
  components: { MapContainer },
  data() {
    return {
      list: [],
      id: '',
      map: "",
    };
  },
  async created() {
    const res = await getProperties();
    console.log(65, res.data);
    this.list=res.data
    console.log(this.list,this.id);
  },
};
</script>

<style lang="scss" scoped>
.el-row {
  img {
    vertical-align: top;
  }
}
.title {
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  margin-top: 15px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-bottom: none;
}
.big {
  padding-bottom: 15px;
  border: 1px solid #ccc;
  border-right: none;
  border-top: none;
  img {
    height: 350px;
  }
}
.small {
  padding-bottom: 15px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  img {
    width: 100px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
.price {
  color: orange;
  margin-left: 83px;
  margin-bottom: 10px;
}
.foot {
  height: 40px;
  line-height: 40px;
  text-indent: 2em;
  border: 1px solid #ccc;
  border-top: none;
}
</style>